<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>
	<div layout:fragment="content">
	
		<link rel="stylesheet" th:href="@{/asserts/vendors/ztree/css/metroStyle/metroStyle.css}" type="text/css">
		
		<style type="text/css">
			table.dataTable thead th, table.dataTable thead td{
				border-bottom: 1px solid #ddd;	
			}	
			table.dataTable tfoot th, table.dataTable tfoot td{
				border-top: 1px solid #ddd;	
			}
			
			/* datatable */
			.dataTables_wrapper .dataTables_paginate .paginate_button{
				border: 0px;	
			}
			.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
				background: #3f51b5;	
				border: 0px;
				color: #ffff !important ; 
				padding: 0.3em 1em; 
			}
			.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
				padding: 0.3em 1em; 
				border: 0px;
			}
			.form-control{
				border-radius: 2px;
				box-shadow: none;
				border-color: #dddddd;
				padding: 8px 12px;
			}
			.form-group{
				margin-right:20px;	
			}
			.component-section{
				margin-top:20px ;	
			}
			label {
				margin-right: 5px;
			}
			table.dataTable{
				line-height:1.8 ; 	
			}
			.col-lg-3 {
				-ms-flex: 0 0 24%;
				flex: 0 0 24%;
				max-width: 24%;
			}
		</style>
		
		<!-- nav_start -->
	<ol class="breadcrumb">
	  <li class="breadcrumb-item">基础平台</li>
	  <li class="breadcrumb-item">监管按理</li>
	  <li class="breadcrumb-item active">系统预警</li>
	</ol>
	<!-- nav_end -->
		
		<div class="container-fluid">
          <div class="animated fadeIn">
            <div class="row">
              <div class="col-lg-12">
             
             	
                <div class="card col-lg-3" style="float:left;margin-right:1%">
                  <div class="card-body">
                   		<ul id="treeDemo" class="ztree"></ul>	
                  </div>
                </div>
             		
                <div class="col-lg-9" style="float:left;">
					 <div class="card">
					  
					  <div class="card-body">
						<form class="form-inline" id="AlinesnoSearchForm" action="" method="post">
						   
							 <!-- my_tags_start 
						  <script W:js="@{/static/js/pinyin.js}" type="text/javascript"></script>
						  <tags:tag></tags:tag>
							 --> 
						  
						  <div class="form-group">
							<label for="resourceName">代码名称</label>
							<input class="form-control" id="resourceName" name="condition[codeName|like]" type="text" placeholder="代码名称">
						  </div>
						  <div class="form-group">
							<label for="resourceLink">代码值</label>
							<input class="form-control" id="resourceLink" name="condition[codeValue|like]" type="text" placeholder="代码值">
						  </div>
						  
						  <input class="form-control" id="pid" name="condition[pid]" type="hidden"  />
						  
						  <button  type="button" onclick="search(this)"  class="btn btn-primary">搜索</button>
						  
						</form>
					  </div>
					  
					</div> 
					<div class="card">
					  <div class="card-body">
							   <table id="datatables" class="display" style="width: 100%">
								<thead>
									<tr>
										<th width="150px">所属应用</th>
										<th>部门名称</th>
										<th>部门描述</th>
										<th>状态</th>
										<th width="150px">添加时间</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
								<tfoot>
									<tr>
										<th>所属应用</th>
										<th>部门名称</th>
										<th>部门描述</th>
										<th>状态</th>
										<th>添加时间</th>
									</tr>
								</tfoot>
							</table> 
					  </div>
					</div>
				</div>	
                
              </div>
              <!-- /.col-->
            </div>
            <!-- /.row-->
          </div>
        </div>

		
	</div>

	<script th:src="@{/asserts/vendors/jquery/js/jquery.min.js}"></script>
	<script th:src="@{/asserts/vendors/datatables/datatables.js}"></script>
	<script th:src="@{/asserts/vendors/layer/layer.js}"></script>
	
	<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.core.js}"></script>
	<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.excheck.js}"></script>
	<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.exedit.js}"></script>

	<SCRIPT type="text/javascript">
        var setting = {
			async : {
				enable : true,
				type: "get",
				url: ctx+"boot/platform/department/departmentData?id=536478251871109120"
			},
            data: {
                simpleData: {
                	enable : true,
                	idKey : "id",
    				pIdKey : "pid",
                    enable: true 
                } , 
                key : {
    				name : "fullName"
    			}
            }  ,
			callback : {
				onClick : zTreeOnClick ,
				onAsyncSuccess : zTreeOnAsyncSuccess
			}
        };
       
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting);
        });

        function zTreeOnClick(event, treeId, treeNode) {
    		console.log("tree node id = " + treeNode.id) ; 
    		$("input[id=pid]").val(treeNode.id) ;
			search() ; 
    	};

    	function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
    		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    		var nodes = treeObj.getNodes();
    		for (var i = 0; i < nodes.length; i++) { //设置节点展开
    			treeObj.expandNode(nodes[i], true, true , true);
    		}
    	}
       
    </SCRIPT>
	
	<script type="text/javascript">
		var dataTable ; 
	
		// key event
		function enterSearch(){
		    $('#AlinesnoSearchForm input').each(function() {
		        $(this).keyup(function(event){
				  if(event.keyCode ==13){
					  search() ; 
				  }
				});
		    });
		}
	
		$(document).ready(function() {
			enterSearch() ; 
			dataTable = $('#datatables').DataTable({
				"processing": true,
		        "serverSide": true,
				"ajax": {
					"url": ctx+"boot/platform/department/datatables",
					"type":"POST" , 
					"data": function(d){
						var searchParams = paramsBuilder() ; 
						if(searchParams){
							$.extend(d , searchParams); // 添加扩展参数 
						}
					}
				} , 
                "searching" : false, 
                "lengthMenu": [10, 20, 30, 50],
                "displayLength": 10,
                "scrollX": true ,
                "responsive": true ,
                "columns": [
                	{ "data": "applicationIdLabel"},        
                	{ "data": "fullName" } ,
                	{ "data": "description" } ,
                	{ "data": "hasStatusLabel" } ,
                	{ "data": "addTime" }
                ],
                "language": {
                    "processing": "处理中...",
                    "lengthMenu": "显示 _MENU_ 项结果",
                    "zeroRecords": "没有找到相应的结果",
                    "info": "第 _START_ 至 _END_ 行，共 _TOTAL_ 行",
                    "infoEmpty": "第 0 至 0 项结果，共 0 项",
                    "infoFiltered": "(由 _MAX_ 项结果过滤)",
                    "infoPostFix": "",
                    "search": "搜索:",
                    "searchPlaceholder": "请输入要搜索内容...",
                    "url": "",
                    "thousands": "'",
                    "emptyTable": "表中数据为空",
                    "loadingRecords": "载入中...",
                    "infoThousands": ",",
                    "paginate": {
                        "first": "首页",
                        "previous": "上页",
                        "next": "下页",
                        "last": "末页"
                    }
                },
                "dom": '<"toolbar">frtip'
            });
			
			$("div.toolbar").html('<b>'+
					'<button type="button" onclick="deleteMultipleItem()" class="btn btn-primary" style="float:right;margin-right:10px">删除</button>'+
					'<button type="button" onclick="modifyItem()" class="btn btn-primary" style="float:right;margin-right:10px">修改</button>'+
					'<button type="button" onclick="addItem()" class="btn btn-primary" style="float:right;margin-right:10px">添加</button>'+
					'</b>');
		
			// 单选
		    $('#datatables tbody').on( 'click', 'tr', function () {
		        if ( $(this).hasClass('selected') ) {
		            $(this).removeClass('selected');
		        } else {
		        	dataTable.$('tr.selected').removeClass('selected');
		            $(this).addClass('selected');
		        }
		    });
			
			/*  
			// 多选
			$('#datatables tbody').on( 'click', 'tr', function () {
		        $(this).toggleClass('selected');
		    } );
			*/
		 
		});
	
		/**
		 * get params
		 */
		function paramsBuilder() {
		    var param = {} ;
		    $('#AlinesnoSortPanel input').each(function() {
		        if ($(this).val() != '' && this.name != '') {
		            param[this.name] = this.value;
		        }

		    });
		    
		    $('#AlinesnoSearchForm input').each(function() {
		        if ($(this).val() != '' && this.name != '') {
		            param[this.name] = this.value;
		        }

		    });
		    
		    $('#trainingSearchForm .selectpicker').each(function() {
		        console.log('value = ' + this.value + ' , value = ' + $(this).val());
		        if ($(this).val() != null &&  $(this).val() != '' && this.name != '') {
		            param[this.name] = $(this).val() ;
		        }
		    });
		    return param ;
		}
		
		//搜索
		function search(btn){
			$('#datatables').dataTable().fnDraw(false);
			
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			treeObj.reAsyncChildNodes(null, "refresh");
		}
	
		// 添加
		function addItem(){
			layer.open({
			  type: 2,
			  title: '添加',
			  shadeClose: true,
			  shade: 0.8,
			  maxmin: true, //开启最大化最小化按钮
			  area: ['893px', '600px'],
			  content: ctx+'boot/platform/department/add' , 
			  end: function () {
				  search(null) ; 
	          }
			});	
		}
		
		// 删除多元素
		function deleteMultipleItem(){
			var selectRows = $('#datatables').DataTable().rows('.selected').data() ; 
			var rowsId = new Array(); 
			for(var i = 0 ; i < selectRows.length ; i ++){
				rowsId.push(selectRows[i].id) ; 
			}
			
			var confirmWindow = layer.confirm('请确认是否删除？', {
			  btn: ['删除','取消'] //按钮
			}, function(){
				$.post(ctx+"boot/platform/department/delete" , {rowsId:rowsId} , function(response){
					console.log('response = ' + response) ; 
					layer.close(confirmWindow) ; 
					if(response.code == 200){
						$('#datatables').dataTable().fnDraw(false);
						search(null) ;  
					}
				})	
			});
		}
		
		// 修改单个元素
		function modifyItem(){
			var selectRows = $('#datatables').DataTable().rows('.selected').data() ; 
			if(selectRows.length == 0){
				layer.alert("编辑请选择元素.")
				return ; 
			}
			if(selectRows.length > 1){
				layer.alert("编辑请选择一条元素.")
				return ; 
			}
			var row = selectRows[0] ; 
			layer.open({type: 2,title: '修改',shadeClose: true,shade: 0.8,maxmin: true, area: ['893px', '600px'],
				  content: ctx+'boot/platform/department/modify?id='+row.id  ,
				  end: function () {
					  search(null) ; 
		          }
			});	
		}
		
		// 删除单个元素
		function deleteSingleItem(){
		    var selectRow = $('#datatables').DataTable().row('.selected') ; 
		    console.log("select row = " + selectRow) ; 
		    selectRow.remove().draw(false);
		}
		
	</script>

</body>
</html>
